<template>
    <!-- tabs标签页 -->
    <div>
        <scroll-view
            class="nav_tab"
            scroll-x
            scroll-with-animation
            :scroll-left="scrollLeft"
        >
            <view
                class="cu_item"
                :class="{ cur: index === tabCur }"
                v-for="(item, index) in tabs"
                :key="index"
                @click="tabSelect(index)"
                >{{ item }}</view
            >
        </scroll-view>
        <div style="height: 110rpx"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabCur: 0, // 当前tabs下标
            scrollLeft: 0, // 当前tabs滑动距离
        };
    },
    props: {
        tabs: {
            type: Array,
            default: [],
        },
    },
    methods: {
        // tab切换
        tabSelect(index) {
            if (this.tabCur === index) return;
            this.tabCur = index;
            let getScrollLeft = () => {
                let arr = this.tabs.slice(0, index);
                let str = arr.join(",");
                return str.length * 8 + arr.length * 18;
            };
            this.scrollLeft = getScrollLeft();
            this.$emit("change", index);
        },
    },
};
</script>

<style lang="scss">
.nav_tab {
    font-size: 32rpx;
    color: #666666;
    background-color: #fff;
    white-space: nowrap;
    border-bottom: 2rpx solid #f7f7f7;
    text-align: center;
    position: fixed;
    left: 0;
    top: 180rpx;
    width: 100%;
    z-index: 2;

    .cu_item {
        display: inline-block;
        margin: 0 20rpx;
        height: 110rpx;
        line-height: 110rpx;

        &.cur {
            position: relative;
            font-size: 36rpx;
            color: #f23030;
            font-weight: bold;

            &::after {
                content: "";
                width: 50rpx;
                height: 6rpx;
                border-radius: 10rpx;
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -25rpx;
                background-color: #f23030;
            }
        }
    }
}
</style>